<template>
  <div class="home">
    <div class="head">
      <img src="/img/logo.jpg" alt="" />
      <div class="head_1">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2" @click="goOrder()">我的订单</el-menu-item>
          <el-menu-item index="3" @click="goOut()">退出登录</el-menu-item>
        </el-menu>
      </div>
      <div class="head_2">
        <img src="/img/icon.jpg" alt="" />
        <p>18759587753</p>
      </div>
    </div>
    <div class="content">
      <div class="c1">
        <div class="c1_1">
          <span>出发城市</span>
          <el-cascader
            v-model="value"
            :options="options"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div class="c1_1">
          <span>到达城市</span>
          <el-cascader
            v-model="value2"
            :options="options2"
            @change="handleChange2"
          ></el-cascader>
        </div>
        <div class="c1_1">
          <span>选择日期</span>
          <el-date-picker
            v-model="value3"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="handleChange3"
          >
          </el-date-picker>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="c1_btn"
          @click="getData"
          >搜索</el-button
        >
      </div>
      <div class="c2">
        <span>{{ value[1] }}</span>
        <img
          src="/img/jpicon-L.jpg"
          alt=""
          style="height: 6px; margin: auto 0"
        />
        <span>{{ value2[1] }}</span>
        <span>{{ value3 }}</span>
        <span>{{ flightNum }}</span>
      </div>
      <div class="c3">
        <span>航空公司/机型/航班</span>
        <span>起飞时间</span>
        <span style="width: 4%"></span>
        <span>抵达时间</span>
        <span>耗时</span>
        <span>价格</span>
        <span>预定</span>
      </div>
      <div class="c4" v-if="flightArray.length">
        <ul>
          <li class="c4_li" v-for="(item, index) in flightArray" :key="index">
            <div>
              <p style="color: #333; font-size: 20px">
                <span>{{ item.aircompany }} </span><span>{{ item.Id }}</span>
              </p>
              <p style="color: #777; font-size: 15px">
                机型：<span>{{ item.airtype }}</span>
              </p>
            </div>
            <div>
              <p style="color: #333; font-size: 30px">
                <strong>{{ item.atime }}</strong>
              </p>
              <p style="color: #777; font-size: 15px">
                {{ item.aplace }}<span>T2</span>
              </p>
            </div>
            <div style="width: 4%">
              <img src="/img/icon_jiantou.jpg" alt="" />
            </div>
            <div>
              <p style="color: #333; font-size: 30px">
                <strong>{{ item.btime }}</strong>
              </p>
              <p style="color: #777; font-size: 15px">{{ item.bplace }}</p>
            </div>
            <div>
              <p style="color: #777; font-size: 15px">{{ item.elapsedTime }}</p>
            </div>
            <div>
              <p style="color: red; font-size: 25px">¥{{ item.price }}</p>
            </div>
            <div><el-button type="warning" plain @click="goHome2(item)">订票</el-button></div>
          </li>
        </ul>
      </div>
      <div v-else style="margin-top: 20px">
        抱歉，没有查询到符合条件的航班信息
      </div>
    </div>
  </div>
</template>
<script>
import http from "@/common/api/request.js";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      activeIndex: "1",
      value: [0, "出发点待选择"],
      value2: [0, "目的地待选择"],
      options: [
        {
          value: "河南",
          label: "河南",
          children: [
            {
              value: "洛阳",
              label: "洛阳",
            },
            {
              value: "郑州",
              label: "郑州",
            },
            {
              value: "南阳",
              label: "南阳",
            },
            {
              value: "信阳",
              label: "信阳",
            },
          ],
        },
        {
          value: "福建",
          label: "福建",
          children: [
            {
              value: "福州",
              label: "福州",
            },
            {
              value: "泉州",
              label: "泉州",
            },
            {
              value: "龙岩",
              label: "龙岩",
            },
            {
              value: "三明",
              label: "三明",
            },
          ],
        },
      ],
      options2: [
        {
          value: "河南",
          label: "河南",
          children: [
            {
              value: "洛阳",
              label: "洛阳",
            },
            {
              value: "郑州",
              label: "郑州",
            },
            {
              value: "南阳",
              label: "南阳",
            },
            {
              value: "信阳",
              label: "信阳",
            },
          ],
        },
        {
          value: "福建",
          label: "福建",
          children: [
            {
              value: "福州",
              label: "福州",
            },
            {
              value: "泉州",
              label: "泉州",
            },
            {
              value: "龙岩",
              label: "龙岩",
            },
            {
              value: "三明",
              label: "三明",
            },
          ],
        },
      ],
      value3: "日期待选择",
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
      },
      flightNum: "（航班数待选择）",
      flightArray: [],
    };
  },
  mounted() {
    // 初始化查询，默认为前一天
    this.value3 = this.timeDefault;
  },
  computed: {
    timeDefault() {
      var date = new Date();
      var s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
      return s1;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleChange(value) {
      console.log(value[1]);
    },
    handleChange2(value2) {
      console.log(value2[1]);
    },
    handleChange3(value3) {
      console.log(value3);
    },
    async getData() {
      let aplace = this.value[1];
      let bplace = this.value2[1];
      let date = this.value3;
      let res = await http.$axios({
        url: "/api/selectFlight",
        params: {
          aplace,
          bplace,
          date,
        },
      });
      this.flightArray = res;
      this.flightNum = "（共有" + res.length + "个航班）";
      console.log("flightArray:" + this.flightArray);
      console.log("res:" + res);
    },
    goHome2(item){
      this.$router.push({
                name:'Home2',
                query:{
                    key:item
                }
            });
    },
    goOrder(){
      this.$router.push({
                name:'Order',
            });
    },
    goOut(){
      this.$router.push({
                name:'Login',
            });
    }
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 41.0625rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 4.375rem;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  .head_1 {
    margin-top: 0.625rem;
  }
  .head_2 {
    margin-top: 0.625rem;
    p {
      color: RGB(150, 150, 150);
    }
  }
}
.content {
  width: 100%;
  flex: 1;
  background-color: RGB(237, 241, 246);
  .c1 {
    width: 84%;
    margin: 1rem auto;
    margin-bottom: 0;
    height: 5.625rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    .c1_1 {
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      height: 46%;
      margin: auto 10px;
      span {
        color: RGB(150, 150, 150);
        margin: auto 10px;
        line-height: 1.0625rem;
      }
    }
    .c1_btn {
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      height: 46%;
      margin: auto 10px;
    }
  }
  ::v-deep .el-input__inner {
    width: 9.375rem;
    border: none;
  }
  .c2 {
    width: 84%;
    margin: 0 auto;
    margin-top: 1rem;
    height: 2.5rem;
    background-color: #fff;
    display: flex;
    span {
      line-height: 2.5rem;
      font-size: 15px;
      padding: 0 10px;
    }
  }
  .c3 {
    width: 84%;
    margin: 0 auto;
    margin-top: 0.4rem;
    height: 2.5rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    span {
      width: 14.2%;
      line-height: 2.5rem;
    }
  }
  .c4 {
    width: 84%;
    margin: 0 auto;
    margin-top: 0.4rem;
    background-color: #fff;
    .c4_li {
      padding: 1.25rem 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px #dcdfe6 solid;
      div {
        width: 14.2%;
      }
    }
  }
}
</style>
